import React from 'react';
import { AlertCircle, X } from 'lucide-react';

interface ErrorDisplayProps {
  error: string | null;
  onDismiss: () => void;
}

export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, onDismiss }) => {
  if (!error) return null;

  return (
    <div className="error-display">
      <div className="error-content">
        <AlertCircle className="error-icon" size={20} />
        <span className="error-message">{error}</span>
        <button 
          className="error-dismiss"
          onClick={onDismiss}
          title="关闭错误提示"
        >
          <X size={16} />
        </button>
      </div>
    </div>
  );
};